<template>
    <Modal :mask-closable="false"
            title="工具列表"
            v-model="toolVisible"
            width="1000"
            class="modal-content-layout"
    >
        <Form :label-width="100" class="search-form">
            <Row>
                <Col :span="span">
                    <FormItem label="使用工具：">
                        <Input type="text" v-model="searchParams.toolName" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                </Col>
                <Col :span="span">
                    <FormItem label="保养方式：">
                        <Input type="text" v-model="searchParams.keepType" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                </Col>
                <Col :span="span" align="center">
                    <Button type="primary" @click="changeNum">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
        </Form>
        <div class="tableContent">
            <Table class="recycleBinTable" ellipsis ref="selection" :columns="columns" :data="data"  @on-selection-change="onSelectChange">
            </Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
        <div slot="footer">
            <Button type="default"  @click="toolVisible = false">{{$t('common.Cancle')}}</Button>
            <Button type="primary" :loading="loading"  @click="handleOk">{{$t('maintenance.Confirmed')}}</Button>
        </div>
    </Modal>
</template>

<script>
    export default {
        name: "useToolsModal",
        data() {
            return {
                toolVisible: false,
                loading: false,
                pageNum:1,
                pageSize:10,
                total:0,
                pageSizeOption: [10,20,30,40],
                span: 6,
                searchParams: {},
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '物料代码',
                        key: 'toolCode'
                    },
                    {
                        title: '使用工具',
                        key: 'toolName'
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'toolModel'
                    },
                    {
                        title: '品牌',
                        key: 'toolBrand'
                    },
                    // {
                    //     title: `${this.$t('spareParts.quantity')}`,
                    //     key: 'toolNum'
                    // },
                    {
                         title: `${ this.$t('maintenance.safekeeping') }`,
                        key: 'keepType'
                    }
                ],
                data: [],
                selectData: []
            }
        },
        methods: {
            show() {
                this.toolVisible = true
                this.selectData = []
                this.searchList()
            },
            onSelectChange(data) {
                console.log(data)
                this.selectData = [...data]
            },
            //分页
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
                // if(this.searchParams.status==3){
                //   params.status = 0
                // }
                // if(this.dateList[1]){
                //     params.startTime = this.$moment(this.dateList[0]).format('YYYY-MM-DD');
                //     params.endTime = this.$moment(this.dateList[1]).format('YYYY-MM-DD');
                // }
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderTool/list',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                        this.data = res.data.record.map(item => {
                            return {
                                ...item,
                                isEdit: false
                            }
                        })
                        this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            handleOk() {
                if(!this.selectData.length) {
                    this.$Message.warning(({content:'请任意选择数据！',duration:6,closable:true}))
                    return false
                }
                this.toolVisible = false
                this.$emit('handleSelectUseTools', this.selectData)
            }
        }
    }
</script>

<style scoped>

</style>
